<template>
  <div class="today_work">
    <div style="width: 100%; padding: 10px">
      <div class="back" @click="backHome()">
        <el-icon style="font-size: 22px; color: var(--el-color-warning)">
          <HomeFilled />
        </el-icon>
      </div>
      <div
        style="
          margin-left: 80px;
          margin-top: -30px;
          margin-bottom: 20px;
          color: var(--el-color-warning);
          /*color: #f8d57e;*/
          font-size: 28px;
          font-family: Montserrat;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.2px;
          word-wrap: break-word;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
        "
      >
        TRANSACTION_ASSISTANT
      </div>
    </div>
    <el-card class="main-card">
      <div class="work-head">
        <div class="work-title">便签</div>
        <div class="add">
          <!--          <span class="icon-point-left" style="margin-right: 30px"></span>-->
          <!--          <span class="icon-point-right" style="margin-right: 120px"></span>-->
          <span
            class="icon-plus-square"
            style="font-size: 40px; color: var(--el-color-warning)"
            @click="isAddDetail = true"
          ></span>
        </div>
        <!--        <div class="work-date">星期四</div>-->
      </div>

      <div class="workList">
        <el-scrollbar style="width: 100%">
          <div v-for="memo in memoList" :key="memo.id">
            <div class="workList-item" @click="getDetailMemo(memo.id)">
              <div class="workList-head">
                <div class="work_img">
                  <img
                    src="/src/assets/test.jpg"
                    alt=""
                    style="width: 40px; height: 40px; border-radius: 40px"
                  />
                </div>
                <div class="workList-action">{{ memo.title }}</div>
                <div class="workList-time">{{ memo.time.slice(11, 16) }}</div>
              </div>
              <div class="workList-action-content">
                {{ memo.content }}
              </div>
              <span
                class="icon-bin"
                style="
                  font-size: 40px;
                  color: var(--el-color-warning);
                  float: right;
                  margin-top: -60px;
                  margin-right: 30px;
                "
                @click="(deleteId = memo.id), (deleteDialogVisible = true)"
              ></span>
            </div>
          </div>
        </el-scrollbar>
      </div>

      <div class="work-detail" v-if="isAddDetail">
        <div class="work-title2">
          <span
            class="icon-checkmark"
            style="
              font-size: 50px;
              color: var(--el-color-warning);
              float: right;
              margin-top: -3px;
              margin-right: 25px;
            "
            @click="addDialogVisible = true"
          ></span>
          备忘录
        </div>
        <input
          class="work-detail-title"
          placeholder="请输入标题"
          v-model="memoAddForm.title"
        />
        <!--        <div class="work-detail-time">{{ memoDetail?.time.slice(0,10) }} {{ memoDetail?.time.slice(11,16) }}</div>-->
        <textarea
          class="work-detail-placeholder"
          v-model="memoAddForm.content"
          placeholder="请输入内容"
        ></textarea>
      </div>

      <div class="work-detail" v-else>
        <div class="work-title2">备忘录</div>
        <input
          class="work-detail-title"
          v-model="memoChangeForm.title"
          @blur="saveDialogVisible = true"
        />
        <div class="work-detail-time">
          {{ memoDetail?.time.slice(0, 10) }}
          {{ memoDetail?.time.slice(11, 16) }}
        </div>
        <textarea
          class="work-detail-placeholder"
          v-model="memoChangeForm.content"
          placeholder="请输入内容"
          @blur="saveDialogVisible = true"
        ></textarea>
      </div>
    </el-card>

    <el-dialog
      v-model="deleteDialogVisible"
      title="备忘录删除"
      width="500"
      align-center
      style="border-radius: 30px"
    >
      <span>确认删除该便签吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button link @click="deleteDialogVisible = false">取消</el-button>
          <el-button link type="warning" @click="deleteMemo">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="saveDialogVisible"
      title="保存备忘录?"
      width="500"
      align-center
      style="border-radius: 30px"
    >
      <span>确认保存该便签吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button link @click="saveDialogVisible = false">取消</el-button>
          <el-button link type="warning" @click="saveChange">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="addDialogVisible"
      title="保存备忘录?"
      width="500"
      align-center
      style="border-radius: 30px"
    >
      <span>确认增加该便签吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button link @click="addDialogVisible = false">取消</el-button>
          <el-button link type="warning" @click="saveAdd">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  getUserMemos,
  deleteUserMemo,
  getMemoDetail,
  changeUserMemo,
  addUserMemo,
} from '@/api/memo'
import { MemoResponse, ReqChangeMemo, ReqAddMemo } from '@/api/memo/type'

const router = useRouter()
const deleteDialogVisible = ref(false)
const backHome = () => {
  router.push('/home')
}
const memoList = ref<MemoResponse[]>()
const deleteId = ref()
let memoChangeForm = reactive<ReqChangeMemo>({
  id: 0,
  title: '',
  content: '',
})
let memoAddForm = reactive<ReqAddMemo>({
  title: '',
  content: '',
})
const memoDetail = ref<MemoResponse>()
const saveDialogVisible = ref(false)
const isAddDetail = ref(true)
const addDialogVisible = ref(false)
onMounted(async () => {
  await getMemoList()
})
const getMemoList = async () => {
  try {
    const { data } = await getUserMemos()
    memoList.value = data
    console.log('返回数据', memoList.value)
  } catch (e) {
    Promise.reject(e)
  }
}
const deleteMemo = async () => {
  try {
    const { message } = await deleteUserMemo(deleteId.value)
    ElMessage({
      showClose: true,
      message: message,
      type: 'success',
    })
  } catch (e) {
    Promise.reject(e)
  }
  await getMemoList()
  deleteDialogVisible.value = false
}
const getDetailMemo = async (id: number) => {
  isAddDetail.value = false
  try {
    const { data } = await getMemoDetail(id)
    memoChangeForm.id = data.id
    memoChangeForm.title = data.title
    memoChangeForm.content = data.content
    memoDetail.value = data
  } catch (e) {
    Promise.reject(e)
  }
}
const saveChange = async () => {
  try {
    const { message } = await changeUserMemo(memoChangeForm)
    ElMessage({
      showClose: true,
      message: message,
      type: 'success',
    })
  } catch (e) {
    Promise.reject(e)
  }
  await getMemoList()
  saveDialogVisible.value = false
}
const saveAdd = async () => {
  try {
    const { message } = await addUserMemo(memoAddForm)
    ElMessage({
      showClose: true,
      message: message,
      type: 'success',
    })
  } catch (e) {
    Promise.reject(e)
  }
  await getMemoList()
  addDialogVisible.value = false
}
</script>

<style scoped>
.today_work {
  width: 100%;
  height: 100%;
  /*display: flex;*/
  /*background: #b6a88e;*/
  background-size: cover; /* 将背景图平铺填满 */
  background-repeat: no-repeat; /* 禁止背景图重复 */
  position: relative;
  background-image: url('src/assets/images/home-background.jpg');
  padding: 20px;
}
.main-card {
  width: 1000px;
  /*margin-top: 5%;*/
  margin-left: 17%;
  /*margin-right: 20%;*/
  opacity: 0.9;
}
.work-head {
  /*border: 1px #000 solid;*/
  width: 465px;
  height: 68px;
  /*margin-top: 100px;*/
  /*margin-left: 300px;*/
}
.work-title {
  /*border: 1px #000 solid;*/
  color: var(--el-color-warning);
  font-size: 26px;
  font-weight: 500;
  margin-left: 10px;
}
.work-date {
  font-size: 26px;
  color: var(--el-color-warning);
  margin-top: 10px;
}
.add {
  font-size: 30px;
  color: var(--el-color-warning);
  float: right;
}
.workList {
  width: 465px;
  height: 540px;
  /*margin-left: 300px;*/
  /*background: #e9ebef;*/
  box-shadow: 3px 3px 3px 3px rgb(197, 196, 196);
  border-radius: 8px 8px 8px 8px;
}
.workList-item {
  border: 1px var(--el-color-warning) solid;
  width: 465px;
  height: 150px;
  /*display: flex;*/
  border-radius: 8px 8px 8px 8px;
}
.workList-head {
  /*border: 1px #000 solid;*/
  display: flex;
  width: 465px;
  height: 55px;
}
.work_img {
  margin-top: 10px;
  margin-left: 10px;
}
.workList-action {
  /*border: 1px #000 solid;*/
  width: 160px;
  height: 28px;
  margin-left: 10px;
  margin-top: 19px;
  font-size: 20px;
  font-weight: 500;
}

.workList-time {
  /*border: 1px #000 solid;*/
  width: 100px;
  height: 30px;
  margin-left: 160px;
  margin-top: 20px;
}
.workList-action-content {
  /*border: 1px #000 solid;*/
  font-size: 14px;
  width: 300px;
  height: 68px;
  margin-top: 6px;
  margin-left: 60px;
}
.work-detail {
  border: 1px var(--el-color-warning) solid;
  width: 465px;
  height: 540px;
  margin-left: 500px;
  margin-top: -540px;
  box-shadow: 3px 3px 3px 3px rgb(197, 196, 196);
  border-radius: 8px 8px 8px 8px;
}

.work-title2 {
  /*border: 1px #000 solid;*/
  color: var(--el-color-warning);
  font-size: 30px;
  font-weight: 500;
  margin-top: 10px;
  margin-left: 20px;
  /*padding-top: 10px;*/
}

.back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: white;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 设置盒子阴影效果 */
  border-radius: 8px;
  margin-left: 20px;
}
.work-detail-title {
  /*border: 1px #000 solid;*/
  border: 0;
  color: #a6a6a6;
  font-size: 26px;
  font-weight: 500;
  margin-top: 10px;
  margin-left: 20px;
}
.work-detail-time {
  color: #a6a6a6;
  font-size: 16px;
  font-weight: 500;
  margin-top: 10px;
  margin-left: 25px;
}
.work-detail-content {
  color: #a6a6a6;
  font-size: 26px;
  font-weight: 500;
  margin-top: 20px;
  margin-left: 20px;
}
.work-detail-placeholder {
  padding: 10px;
  padding-left: 15px;
  width: 420px;
  height: 360px;
  margin-left: 20px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  border: 2px solid var(--el-color-warning);
}
</style>
